<template>
  <el-container>
    <el-row :gutter="24">
      <el-col
        v-for="(card_Data, item) in study_schooldata"
        :key="item"
        :sm="24"
        :md="11"
        :lg="7"
        class="card-col"
      >
        <div class="box-card">
          <div class="card-body">
            <el-image :src="card_Data.imgsUrl" />
            <el-col>
              <div class="body-header">
                {{ card_Data.title }}
                <el-tag
                  size="mini"
                  v-for="(tag, index) in card_Data.tags"
                  :key="index"
                  :type="tag.type"
                >
                  {{ tag.tag }}
                </el-tag>
              </div>
              <div class="body-content">
                {{ card_Data.content }}
              </div>
            </el-col>
          </div>
          <el-col class="card-footer">
            <!-- 分割线 -->
            <el-divider> </el-divider>
            <!-- /分割线 -->
            <div class="footer-i">
              <el-tooltip content="点击复制链接" placement="top">
                <i
                  class="el-icon-document-copy"
                  :data-clipboard-text="card_Data.src"
                  @click="copy"
                ></i>
              </el-tooltip>
              <el-divider direction="vertical"></el-divider>
              <el-tooltip content="直达" placement="top">
                <el-link :href="card_Data.src" target="_blank">
                  <i class="el-icon-top-right"></i>
                </el-link>
              </el-tooltip>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import "../../assets/scss/card.scss";
/**复制功能 */
import ClipboardJS from "clipboard";
import { mapState } from "vuex";
export default {
  /**卡片数据 */
  computed: {
    ...mapState({
      study_schooldata: (state) => state.Data.study_schoolList,
    }),
  },
  data() {
    return {
      circleUrl: require("../../assets/image/logo.png"),
      src: "http://www.baidu.com",
    };
  },
  methods: {
    copy() {
      var copyBtn = new ClipboardJS(".el-icon-document-copy");
      copyBtn.on("success", (e) => {
        this.$message({
          message: "已成功复制",
          type: "success",
        });
        copyBtn.destroy(); // 释放内存
        console.log(e);
      });
      copyBtn.on("error", (e) => {
        this.$message({
          message: "复制失败",
          type: "error",
        });
        copyBtn.destroy();
        console.log(e);
      });
    },
  },
};
</script>
